<template>
	<scroll-view class="wrap" scroll-y="true">
		<view v-for="(item,index) in rows" v-show="isLoadDowning == 0" :key="index" @click="goDept(item)">
			<view class="relative">
				<view class="tops">
					<view class="time">
						{{item.reservationTime}}
					</view>
					<!-- 预约状态（1待看房 2已看房 3取消 4爽约） -->
					<view class="code" v-if="item.reservationState==1">
						预约成功
					</view>
					<view class="code" v-if="item.reservationState==2">
						已经到店
					</view>
					<view class="code-n" v-if="item.reservationState==3">
						取消预约
					</view>
					<view class="code-n" v-if="item.reservationState==4">
						预约过期
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="top">
					<view class="top-h">
						{{item.deptName}}
					</view>
				</view>
				<view class="information">
					<text style="margin-right:5px;">{{item.rarea}}</text>{{item.street}}｜
					<text style="margin-right:5px;">{{item.metro}}</text>{{item.station}}站
				</view>
				<view class="area">
					<text style="color: #999;">面积：</text><text
						style="margin-right: 10rpx;">{{item.minArea}}-{{item.maxArea}}</text><text
						class="mon-s">m²</text>
				</view>
				<view class="mon">
					<text style="color: #999;">租金：</text><text class="mon-y">{{item.minPrice}}</text><text
						class="mon-s">元/月起</text>
				</view>
				<view class="btn">
					<view class="btn-gn" @tap.stop="del(item)" v-if="item.reservationState == 1">
						取消预看
					</view>
					<view class="btn-gn" @tap.stop="makePhone(item.deptId)">
						电话咨询
					</view>
					<view class="btn-gn" @tap.stop="clickWx(item.deptId)">
						管家微信
					</view>
				</view>
			</view>
		</view>

		<div class="load" v-show="isLoadDowning == 1">
			<img class="loadImg" src="https://gateway.yijushenyang.com/static/img/loading.png" alt="">
			<view style="height: auto;line-height: 0;color: #999;">加载中</view>
		</div>
		<div class="load" v-show="isLoadDowning == 2">
			<img src="https://gateway.yijushenyang.com/img/none.png"
				style="margin: 0 auto; margin-top: 40px; width: 50px; height:50px;" alt="">
			<view class="" style="margin-top: 10px; color: #999;line-height: 0;">
				暂无数据
			</view>
		</div>
	</scroll-view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				openId: uni.getStorageSync('openId'),
				list: [],
				rows: [],
				phone: '',
				pageNum: 1,
				pageSize: 10,
				loadBottom: true,
				isLoadDowning: 0,
			}
		},
		onLoad(option) {
			// this.getList()
		},

		onShow() {
			this.getList()
		},

		onReachBottom() {
			// if (this.loadBottom) {
			// 	this.pageNum += 1;
			// 	if (this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
			// 		this.isLoadDowning = 1
			// 		this.getList()
			// 	}
			// } else {
			// 	this.isLoadDowning = 2
			// }
		},

		onShareAppMessage(res) { //发送给朋友
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		methods: {
			// goDept(item) {
			// 	console.log(item)
			// 	uni.navigateTo({
			// 		url: '/pages/builds/detail?id=' + item.deptId
			// 	})
			// },
			// del(item) {
			// 	let data = {
			// 		reservationId: item.reservationId,
			// 		openId: uni.getStorageSync('openId')
			// 	}
			// 	if (uni.getStorageSync('openId')) {
			// 		if (this.reservationTime == '') {
			// 			uni.showToast({
			// 				title: '请选择预约时间',
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		} else {
			// 			this.api.post('system/reservation/app/cancel', data).then(res => {
			// 				console.log(res);
			// 				if (res.data.code == 200) {
			// 					uni.showToast({
			// 						title: '取消成功',
			// 						icon: 'success',
			// 						duration: 2000
			// 					});
			// 					this.getList()
			// 				} else {
			// 					uni.showToast({
			// 						title: res.data.msg,
			// 						icon: 'none',
			// 						duration: 2000
			// 					});
			// 				}
			// 			})
			// 		}
			// 	} else {
			// 		this.loginTip()
			// 	}
			// },
			// clickWx(e) {
			// 	uni.navigateTo({
			// 		url: '/pages/wxuqrCode/index?deptId=' + e
			// 	})
			// },
			// makePhone(num) {
			// 	let pream = {
			// 		deptId: num
			// 	}
			// 	this.api.get('fangyuan/store/app/storeAppPeriphery', pream).then(res => {
			// 		if (res.data.code == 200) {
			// 			uni.makePhoneCall({
			// 				phoneNumber: res.data.data.housekeepPhone,
			// 				success: function() {
			// 					// console.log("拨打电话成功！")
			// 				},
			// 				fail: function() {
			// 					// console.log("拨打电话失败！")
			// 				}
			// 			});

			// 		}
			// 	})
			// },

			getList() {
				let old = this.rows
				let data = {
					// pageNum: this.pageNum,
					// pageSize: this.pageSize,
					openId: uni.getStorageSync('openId'),
				}
				if (uni.getStorageSync('openId')) {
					this.api.get('system/reservation/app/selReservationByOpenIdPage', data).then(res => {
						if (res.data.code == 200) {
							if (res.data.total > 0) {
								this.isLoadDowning = 0
								this.list = res.data
								this.rows = res.data.rows

								let news = res.data.rows
								if (this.pageNum > 1) {
									this.isLoadDowning = 0
									this.rows = old.concat(news)
								}
							} else {
								this.isLoadDowning = 2
							}

						}
						// else if (res.data.code == 500) {
						// 	this.loginTip()
						// }
					})
				} else {
					this.loginTip()
				}

			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000);
			},
		}
	}
</script>

<style>
	@import '/common/css/my/reservation.scss';
</style>

<style lang="scss">
	.wrap {
		@include wrap
	}

	.load {
		width: 100%;
		height: 20vh;
		line-height: 20vh;
		text-align: center;
		color: black;
		font-size: 32rpx;
		margin: 0 auto;
	}

	.loadImg {
		width: 250rpx;
		height: 250rpx;
		margin-top: 100rpx
	}

	.relative {
		width: 700rpx;
		margin: 0 auto;
		// margin-bottom: 30rpx;
	}

	.tops {
		width: 620rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 25rpx 25rpx 20rpx;
		margin: 0 auto;
		font-size: $p;
		font-weight: bold;
		@include omit;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e0dde2;
		background-color: white;
		border-radius: 15rpx 15rpx 0 0;
	}

	.btn {
		width: 90%;
		position: absolute;
		display: flex;
		justify-content: flex-end;
		right: 30rpx;
		bottom: 25rpx;
		gap: 20rpx
	}

	.btn-gn {
		width: 80rpx;
		padding: 8rpx 15rpx;
		font-size: 20rpx;
		border-radius: 50rpx;
		border: 1rpx solid black;
		text-align: center;
	}


	.top {
		// width: 680rpx;
		padding: 25rpx 35rpx 10rpx;
		font-size: $p;
		font-weight: bold;
		@include omit;
	}

	.code {
		height: 40rpx;
		line-height: 40rpx;
		padding: 2rpx 10rpx;
		color: white;
		background-color: #00c6ff;
		border-radius: 10rpx;
	}

	.code-n {
		height: 40rpx;
		line-height: 40rpx;
		padding: 2rpx 10rpx;
		color: white;
		background-color: #bbbab4;
		color: white;
		border-radius: 10rpx;
	}

	.notice {
		width: 700rpx;
		position: relative;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background-color: white;
		border-radius: 0 0 15rpx 15rpx;
		padding-bottom: 70rpx;
	}
</style>